fix: stabilise MenuPortal updateComputedPosition to prevent infinite re-render loop - #6097

⚠️ No Changeset found

Latest commit: 4033960

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Just to pile on, we are also seeing this issue and this fix seems to address the underlying issue in our use case.

We hit this in production as well (portaled AsyncSelect inside a scrollable Bootstrap modal, Chrome on Windows): the whole page fell back to our error boundary with "Maximum update depth exceeded", with the same stack as #6003 (setMenuPortalElement → runAutoUpdate → autoUpdate → updateComputedPosition → setComputedPosition). We're applying this exact change as a pnpm patch against 5.10.2. In our app, with the control rect forced to drift sub-pixel, the page crashes without the patch and works with it, and the menu still follows the control when the modal scrolls. We haven't been able to reproduce the natural trigger ourselves (a single occurrence so far), so the regression test below simulates the drift directly.

To help get this merged, here is what is currently blocking it and a follow-up that addresses each point:

1. unit_test is red because of prettier:check. The "Ran Prettier" commit was formatted with Prettier 3 (trailing commas in type parameters, the extends line layout), but the repo pins Prettier 2. Running the repo's own yarn prettier --write packages/react-select/src/components/Menu.tsx reverts that churn, so the diff shrinks to just the fix (+8/−11 in Menu.tsx).
2. No changeset. Added .changeset/stable-menu-portal-position.md (react-select: patch).
3. No regression test. Added packages/react-select/src/__tests__/MenuPortal.test.tsx. It makes the control's getBoundingClientRect alternate by 0.3px, mounts a portaled Select, then opens the menu:
   • on master it fails with Maximum update depth exceeded;
   • with this PR it passes.

With the follow-up applied, all four steps of the CircleCI unit_test job pass locally: prettier:check, lint, type-check, and test:jest (256 passed).

import React from 'react';
import { render } from '@testing-library/react';

import Select from '../Select';
import { OPTIONS } from './constants';

// Regression test for https://github.com/JedWatson/react-select/issues/6003
// When the control's bounding rect drifts by a sub-pixel amount between reads
// (zoomed viewport, fractional DPI, scrolling ancestor), MenuPortal must not
// enter a synchronous setState loop ("Maximum update depth exceeded").
test('portaled menu does not loop when the control rect drifts sub-pixel', () => {
  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
  let reads = 0;
  Element.prototype.getBoundingClientRect = function (this: Element) {
    if (!this.classList.contains('react-select__control')) {
      return originalGetBoundingClientRect.call(this);
    }
    const top = 100 + (reads++ % 2 ? 0.3 : 0);
    return {
      x: 0,
      y: top,
      top,
      bottom: top + 38,
      left: 0,
      right: 200,
      width: 200,
      height: 38,
      toJSON: () => ({}),
    };
  };

  const props = {
    classNamePrefix: 'react-select',
    options: OPTIONS,
    menuPortalTarget: document.body,
    onChange: () => {},
    onInputChange: () => {},
    onMenuOpen: () => {},
    onMenuClose: () => {},
    inputValue: '',
    value: null,
  };

  try {
    const { rerender } = render(<Select {...props} menuIsOpen={false} />);

    expect(() => rerender(<Select {...props} menuIsOpen />)).not.toThrow();
    expect(
      document.body.querySelector('.react-select__menu-portal')
    ).toBeTruthy();
  } finally {
    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
  }
});

@9KenM, feel free to pull these into your branch. Alternatively, a maintainer can push them directly, since "Allow edits by maintainers" is on. I'm also happy to open a separate PR on top of yours with you credited as co-author, if that's easier.